<template>
	<w-container :loading="loading">
		<view class="pa-15 flex flex-ai-center flex-w flex-js-sb">
			<view @click="toPage(item)" v-for="(item,index) in list" :key="item.id" class="item-box mb-20">
				<w-image :src="item.main_image" :width="330/2" :height="330/2" radius="8"></w-image>
				<view class="mtb-12 font-color-222 font-size-14 text-overflow font-w-600">{{ item.name }}</view>
				<w-button style="width: 118rpx;height: 56rpx;background: #1D54F7;border-radius: 28rpx;font-size: 28rpx;">升级</w-button>
			</view>
		</view>
		<w-loading v-if="!list.length" type="empty" emptyType="search"></w-loading>
	</w-container>
</template>

<script>
	import { upCollectionList } from "@/api/collection/index"
	export default {
		data() {
			return {
				list:[],
				loading:true
			}
		},
		onShow(){
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			async getList(){
				const { code,data } = await upCollectionList()
				if(code != 1) return
				this.list = data
				this.loading = false
				uni.stopPullDownRefresh()
			},
			toPage(item){
				uni.navigateTo({
					url:`/pages/upgrade/operation?id=${item.play_id}&collect_id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {
		width: 49%;
	}
</style>
